<template lang="">
    <div class="main">
        <selfChart :option="option" />
    </div>
    <div  class="main">
        <selfChart :option="option1" />
    </div>
    <div  class="main">
        <selfChart :option="option2" />
    </div>
</template>
<script>
import chart from './chart.vue';
export default {
    components: {
        selfChart: chart
    },
    data() {
        const data = [];
            for (let i = 0; i <= 100; i++) {
            let theta = (i / 100) * 360;
            let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
            data.push([r, theta]);
        }
        return {
            option: {
                xAxis: {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value',
                    name: 'mm'
                },
                tooltip: {
                    formatter: '{b}{a}:{c}mm'
                },
                series: [
                    {
                        name: '降雨量',
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            },
            option1: {
                title: {
                    text: 'Two Value-Axes in Polar'
                },
                legend: {
                    data: ['line']
                },
                polar: {},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross'
                    }
                },
                angleAxis: {
                    type: 'value',
                    startAngle: 0
                },
                radiusAxis: {},
                series: [
                    {
                        coordinateSystem: 'polar',
                        name: 'line',
                        type: 'line',
                        data
                    }
                ]
            },
            option2: {
                title: {
                    text: '某班同学能力对比图'
                },
                legend: {
                    data: ['张三', '李四']
                },
                tooltip: {
                     trigger: 'item'
                },
                radar: {
                    shape: 'circle',
                    indicator: [
                        { name: '智力', max: 6500 },
                        { name: '情商', max: 16000 },
                        { name: '体力', max: 30000 },
                        { name: '财力', max: 38000 },
                        { name: '容貌', max: 52000 }
                    ]
                },
                series: [
                    {
                    name: '能力对比图',
                    type: 'radar',
                    data: [
                        {
                            value: [4200, 3000, 20000, 35000, 50000],
                            name: '张三'
                        },
                        {
                            value: [5000, 14000, 28000, 26000, 42000],
                            name: '李四'
                        }
                    ]
                    }
                ]

            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .main{
        width: 500px;
        height: 400px;
    }
</style>